<template>
	<div>
		<!-- 忘记密码 -->
		<customHeader middleTitle="手机验证" />

		<form class="form">
			<view class="form-group">
				<input v-model="username" type="text" placeholder="请填写手机号" class="username" />
			</view>
			<view class="form-group jus">
				<input v-model="yan" type="yan" placeholder="请输入验证码" class="yan" />
				<span class="label" @click="sendVerificationCode" :disabled="counting">{{ buttonText }}</span>
			</view>
			<view class="form-group yu">
				<button type="button" @click="zhuce"
					:class="{ 'btn1': !isNextButtonRed, 'btn2': isNextButtonRed }">下一步</button>
			</view>
		</form>

	</div>
</template>

<script>
	import {
		request,
		showToast
	} from "../../utils/api.js"
	import customHeader from "../../components/header/header.vue"
	export default {
		data() {
			return {
				username: '',

				yan: '',
				neng: true,
				count: 60, // 初始倒计时秒数
				counting: false, // 是否正在倒计时
				sent: false // 是否已经发送过验证码
			}
		},
		computed: {
			buttonText() {
				return this.counting ? `${this.count}s` : this.sent ? '重新发送验证码' : '发送验证码';
			},
			// 计算属性：检查username和yan是否都有值
			isNextButtonRed() {
				return this.username !== '' && this.yan !== '';
			}
		},
		methods: {

			sendVerificationCode() {
				// 模拟发送验证码逻辑，实际场景中需要与后端进行通信
				// 正则表达式，用于验证手机号
				if (this.neng) {

				}
				const phoneNumberRegex = /^1[3456789]\d{9}$/;

				if (phoneNumberRegex.test(this.username)) {
					// 启动倒计时
					this.counting = true;
					this.sent = true;
					const timer = setInterval(() => {
						if (this.count > 0) {
							this.count--;
						} else {
							clearInterval(timer);
							this.counting = false;
							this.count = 60;
						}
					}, 1000);
				} else {

					showToast("不是有效的手机号"); // 中止后续操作并抛出错误
				}
				console.log('发送验证码');
				this.verifyCode()


			},
			verifyCode() {
				// 向后端发送请求，验证验证码
				console.log('验证验证码11111');
				const data = {
					phoneNum: this.username,


				}
				request('/newapp/setting/sendVerifyCodeResetPWD.do', 'POST', data).then((res) => {
					console.log(res);
					if (res.code) {
						showToast(res.msg)
					}
					if (res.code == -1) {
						this.neng = false;
						this.counting = false;
						showToast(res.msg)
					}

				}).catch((err) => {
					console.log(err);
				})
			},


			na() {
				var data = {
					mobile: this.username
				}
				console.log(data)

				request('/app/register/sendVerify.do', 'POST', data).then((res) => {
					console.log(res);
				}).catch((err) => {
					console.log(err);
				})
			},
			zhuce() {
				const data = {
					phoneNum: this.username,

					verifyCode: this.yan
				}
				request('/newapp/setting/verifyCode.do', 'POST', data).then((res) => {
					console.log(res);
					if (res.code == 1) {
						showToast(res.msg)
						uni.navigateTo({
							url: '/pages/delpassword/delpassword?username=' + encodeURIComponent(this
								.username)
						});
					}
					if (res.code == -1) {
						showToast(res.msg)
					}

				}).catch((err) => {
					console.log(err);
				})
			}
		},
		components: {
			customHeader
		}
	}
</script>

<style lang="scss" scoped>
	@import "verification.scss"
</style>